<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户回单查询</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .custom-input-width {
            width: 200px;
        }

        .input-container {
            display: flex;
        }

        .input-container input {
            flex: 1;
            margin-right: 0px;
        }

        .required {
            color: red;
            margin-left: 5px; /* Add some space between the label text and the asterisk */
        }


    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="form-initPlat" id="userForm" method="post"
          style="margin-bottom: 20px">
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">账号<span class="required">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="saAcctNo" required lay-verify="required" placeholder="请输入待查账号"
                           autocomplete="off" class="layui-input custom-input-width">
                </div>
            </div>
        </div>
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">查询范围<span class="required">*</span></label>
                <div class="layui-input-block">
                    <input type="text" required lay-verify="required" name="endBeginDate" id="dateRange"
                           placeholder="请选择查询时间范围" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">打印状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="printState" value="0" title="全部" checked>
                    <input type="radio" name="printState" value="1" title="已打印">
                    <input type="radio" name="printState" value="2" title="未打印">
                </div>
            </div>
        </div>
        <div class="input-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">发生额范围：</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline" style="width: 80px;">
                        <input type="number" name="minMoney" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 80px;">
                        <input type="number" name="maxMoney" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">借贷标识：</label>
                <div class="layui-input-block">
                    <input type="radio" name="loanFlag" value="0" title="借">
                    <input type="radio" name="loanFlag" value="1" title="贷">
                    <span>不选择默认全部</span>
                </div>
            </div>
            <button style="margin-left: 15px" class="layui-btn layui-btn-normal" lay-submit=""
                    lay-filter="post-initPlat">查&emsp;询
            </button>

        </div>
    </form>
    <table id="demo" lay-filter="test"></table>
    <div id="pageHtml"></div>
    <script type="text/html" id="operationBtnTemplate">
        <button class="layui-btn layui-btn-sm" lay-event="downLoad">下载</button>
    </script>
</div>


<script src="../../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'laydate', 'table', 'form', "laypage"], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, element = layui.element, laydate = layui.laydate,
            laypage = layui.laypage,
            table = layui.table;
        element.render('icon');
        let limit = 10, page = 1, count = 10;
        // 初始化时间范围选择器
        laydate.render({
            elem: '#dateRange',
            range: true,
            format: 'yyyy/MM/dd' // 使用斜杠作为时间分隔符
        });
        laypage.render({
            elem: 'pageHtml' //注意，这里的 test1 是 ID，不用加 # 号
            , count: count //数据总数，从服务端得到
            , limit: 10
            , limits: [10, 20, 50, 100, 200]
            , layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    page = obj.curr;
                    limit = obj.limit;
                }
            }
        });

        function getLoanFlag(d) {
            if (d == null || d === "") return "无数据";
            if (String(d['loanFlag']) === "0") {
                return "借/收"
            } else if (String(d['loanFlag']) === "1") {
                return "贷/付"
            } else {
                return d['loanFlag']
            }
        }

        dataPages([]);

        function dataPages(dataPages) {
            table.render({
                elem: '#demo'
                , height: 312
                , data: dataPages
                , page: false //开启分页
                , cols: [[ //表头
                    {
                        field: 'innerNo', title: '回单内部编号', width: 120, templet: function (d) {
                            return atob(d.innerNo)
                        }
                    }
                    , {field: 'trsDate', title: '交易日期', width: 120}
                    , {field: 'billName', title: '回单名称', width: 120}
                    , {field: 'acNo', title: '账号', width: 120}
                    , {field: 'currency', title: '币种', width: 120}
                    , {
                        field: 'loanFlag', title: '借贷标识', width: 120, templet: function (d) {
                            return getLoanFlag(d)
                        }
                    }
                    , {field: 'trsAmount', title: '交易金额', width: 120}
                    , {field: 'printCount', title: '打印次数', width: 120}
                    , {field: 'fileName', title: '文件名称', width: 120}
                    , {field: 'svrId', title: '交易流水号', width: 120}
                    , {field: 'recseq', title: '记账流水号', width: 120}
                    , {field: 'opAcntNo', title: '对方账号', width: 120}
                    , {title: '操作', width: 120, templet: '#operationBtnTemplate'}
                ]]
            });
        }

        table.on('tool(test)', function (obj) {
            const event = obj.event; // Get the event name ('edit' or 'delete')
            const data = obj.data; // Get the data of the current row
            console.log(data);
            if (event === 'downLoad') {
                downLoad(data)
            }
        });

        function downLoad(data) {
            admin.req({
                url: "/platform/cmbc/getB2eElectNoteDownLoadNew",
                data: {
                    acNo: data.acNo, innerNos: data['innerNo'],
                    fileNames: data['fileName'], operFlag: "1", needSign: data.needSign
                },
                type: 'post',
                done: function (res) {
                    const data = res.data;
                    var binaryData = atob(data['FileContent']); // 去除"data:application/pdf;"
                    var byteArray = new Uint8Array(binaryData.length);
                    for (var i = 0; i < binaryData.length; i++) {
                        byteArray[i] = binaryData.charCodeAt(i);
                    }
                    var blob = new Blob([byteArray], {type: 'application/pdf'});

                    var downloadLink = document.createElement('a');
                    downloadLink.href = URL.createObjectURL(blob);
                    downloadLink.download = 'file.pdf';
                    downloadLink.innerText = '下载PDF文件';

// 打开新窗口并导航到下载链接
                    window.open(downloadLink.href, '_blank');
                }
            });
        }

        //上传完毕 提交表单
        form.on('submit(post-initPlat)', function (data) {
            const filed = data.field;
            const endBeginDate = filed.endBeginDate.split("-");
            const beginDate = endBeginDate[0].replaceAll("/", "-");
            const endDate = endBeginDate[1].replaceAll("/", "-");
            admin.req({
                url: "/platform/cmbc/getElectnoteListQry",
                data: {
                    saAcctNo: filed.saAcctNo,
                    qryStartDate: beginDate,
                    qryEndDate: endDate,
                    minMoney: filed.minMoney,
                    maxMoney: filed.maxMoney,
                    loanFlag: filed.loanFlag,
                    page: page,
                    limit: limit
                },
                type: 'post',
                done: function (res) {
                    let data = res.data;
                    count = data['Count'];
                    if (String(count) === "0") return;
                    if (String(count) === "1") {
                        const array = [];
                        for (let key in data['List']) {
                            if (data['List'].hasOwnProperty(key)) {
                                array.push(data['List'][key]);
                            }
                        }
                        dataPages(array)
                    } else {
                        dataPages(data['List']['Map'])
                    }

                }
            });
            return false;
        });

    });
</script>
</body>
</html>